<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建满减</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间">
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '20:00:00']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="优惠形式">
                            <el-radio-group v-model="form.type">
                                <el-radio label="2">阶梯满减</el-radio>
                                <el-radio label="1">循环满减</el-radio>
                            </el-radio-group>
                            <div v-show="form.type=='1'" class="mar_t10">
                                <div class="time_item mar_b10"  v-for="(item,index) in moneyArr1" :key="index">
                                    <span class="mar_lr10">每满</span>
                                    <el-input-number v-model="item.fullMoney" controls-position="right" :min="0" :max="100000000"
                                                     placeholder="门槛金额"></el-input-number>
                                    <span class="mar_lr10">元</span>
                                    <span class="mar_l20 mar_r10">减</span>
                                    <el-input-number v-model="item.money" controls-position="right" :min="0" :max="100000000"
                                                     placeholder="力度金额"></el-input-number>
                                    <span class="mar_lr10">元</span>
                                </div>
                            </div>
                            <div v-show="form.type=='2'"  class="mar_t10">
                                <div class="time_item mar_b10" v-for="(item,index) in moneyArr" :key="index">
                                    <span class="mar_lr10">满</span>
                                    <el-input-number v-model="item.fullMoney" controls-position="right" :min="0" :max="100000000"
                                                     placeholder="门槛金额"></el-input-number>
                                    <span class="mar_lr10">元</span>
                                    <span class="mar_l20 mar_r10">减</span>
                                    <el-input-number v-model="item.money" controls-position="right" :min="0" :max="100000000"
                                                     placeholder="力度金额"></el-input-number>
                                    <span class="mar_lr10">元</span>
<!--                                    <el-input placeholder="门槛金额" type="number" v-model="item.full"-->
<!--                                              class="inppsf mar_l10" style="width: 190px;">-->
<!--                                        <template slot="append">元</template>-->
<!--                                    </el-input>-->
<!--                                    <span class="mar_l20">减</span>-->
<!--                                    <el-input placeholder="力度金额" type="number" v-model="item.reduce"-->
<!--                                              class="inppsf mar_l10" style="width: 190px;">-->
<!--                                        <template slot="append">元</template>-->
<!--                                    </el-input>-->
                                    <el-button type="text" @click="delfullArr(index)"
                                               class="fon_12 mar_l10">删除
                                    </el-button>
                                </div>
                                <el-button v-show="moneyArr.length<5" type="text" @click="addfullArr">
                                    <Icon type="md-add"/>
                                    添加满减
                                </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="选择人群">
                            <el-radio-group v-model="form.people">
                                <el-radio label="1">全部人群</el-radio>
                                <el-radio label="2">新客</el-radio>
<!--                                <el-radio label="3">会员</el-radio>-->
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="适用场景">
                            <el-checkbox-group v-model="form.item">
                                <el-checkbox label="1">外卖</el-checkbox>
                                <el-checkbox label="2">堂食</el-checkbox>
                                <el-checkbox label="3">快餐</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
<!--                        <el-form-item label="可用门店">-->
<!--                            <el-radio-group v-model="form.useType">-->
<!--                                <el-radio label="1" disabled>仅本店可用</el-radio>-->
<!--                                <el-radio label="2" disabled>全店通用</el-radio>-->
<!--                                <el-radio label="3" disabled>指定门店可用</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                        <el-form-item label="循环周期">
                            <el-checkbox-group v-model="form.week">
                                <el-checkbox label="1">周一</el-checkbox>
                                <el-checkbox label="2">周二</el-checkbox>
                                <el-checkbox label="3">周三</el-checkbox>
                                <el-checkbox label="4">周四</el-checkbox>
                                <el-checkbox label="5">周五</el-checkbox>
                                <el-checkbox label="6">周六</el-checkbox>
                                <el-checkbox label="0">周日</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="生效时间">
                            <el-radio-group v-model="form.timeType">
                                <el-radio label="1">全天</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是店铺满减？" name="1">
                            <div>店铺满减是作用于门店订单的一种优惠形式，可根据店铺的客单、客群设置不同的优惠门槛及力度，最多可设置5档门槛及优惠金额。</div>
                        </el-collapse-item>
                        <el-collapse-item title="为什么要设置店铺满减？" name="2">
                            <div>合理的满减优惠可有效吸引用户下单，提高进店率及转化率。</div>
                        </el-collapse-item>
                        <el-collapse-item title="店铺满减将在哪里展示？" name="3">
                            <div>在门店下单页、活动页面等</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
    </div>
</template>
<script>
    import {postsSaveReduce,getsaveReduce} from "@/api/plug";
    import {changeDate} from "@/utils/index";
    import {mapState} from "vuex";


    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        computed: {
            ...mapState(['storeId']),
        },
        data() {
            return {
                form: {
                    name: '',
                    full: '',
                    type: '2',
                    fullMoney: '',
                    money: '',
                    people: '1',
                    item: ['1'],
                    useType: '1',
                    week: ['1','2','3','4','5','6','0'],
                    timeType: '1',
                },
                timeData:[new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                moneyArr1:[
                    {
                        fullMoney:'',
                        money:'',
                    }
                ],
                moneyArr: [
                    {
                        fullMoney:'',
                        money:'',
                    }
                ],
                collapseName: '',
            }
        },
        methods: {
            addfullArr() {
                let fullObj = {fullMoney: '', money: ''}
                this.$set(this.moneyArr, this.moneyArr.length, fullObj)
            },
            delfullArr(index) {
                this.$delete(this.moneyArr, index)
            },
            async edit(){
                const {data} = await getsaveReduce({id: this.id,storeId:this.storeId})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
                if (data.type=='2' && data.moneyArr) {
                    this.moneyArr = data.moneyArr.map((v => ({fullMoney: v.fullMoney, money: v.money})))
                }if(data.type=='1'){
                    this.moneyArr1 = data.moneyArr.map((v => ({fullMoney: v.fullMoney, money: v.money})))
                }
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.form.type=='1'){
                            this.form.moneyArr = this.moneyArr1
                        }else {
                            this.form.moneyArr = this.moneyArr
                        }
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        this.form.storeId = this.storeId
                        const {msg} = await postsSaveReduce(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .time_item .el-input {
         width: 180px;
    }
</style>
